<template>
    <div class="registery-container">
        <el-card class="registery-card" shadow="hover">
            <el-form ref="ruleFormRef" class="login-form" autocomplete="on"
                     :model="regiseryData"
                     :rules="businessRegisteryRules"
                     label-position="top" status-icon>
                <el-form-item prop="cover">
                    <el-upload
                            name="file"
                            method="post"
                            class="avatar-uploader"
                            action="http://127.0.0.1:8080/api/common/uploud/avatar"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                    >
                        <el-image v-if="regiseryData.cover" :src="regiseryData.cover" class="avatar" alt=""/>
                        <el-icon v-else class="avatar-uploader-icon">
                            <Plus/>
                        </el-icon>
                    </el-upload>
                </el-form-item>
                <el-form-item property="name" label="店名">
                    <el-input placeholder="请输入店铺名称" v-model="regiseryData.name" name="name"/>
                </el-form-item>
                <el-form-item label="用户名" prop="userName">
                    <el-input placeholder="请输入用户名" v-model="regiseryData.userName" name="userName" type="text"/>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input placeholder="请输入密码" v-model="regiseryData.password" name="password" show-password
                              type="password"/>
                </el-form-item>
                <el-form-item label="电话" prop="phone">
                    <el-input placeholder="请输入用户名" v-model="regiseryData.phone" name="phone" type="text"/>
                </el-form-item>
                <el-form-item label="地址" prop="address">
                    <el-input placeholder="请输入店铺地址" v-model="regiseryData.address" name="address" type="text"/>
                </el-form-item>
                <el-form-item >
                    <el-button type="primary" @click="registeryHandler(ruleFormRef)">注册</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script setup>
import {businessRegisteryRules} from "@/rules/UserFormRules";
import {reactive, ref} from "vue";
import {Plus} from "@element-plus/icons-vue";
import {adminLogin, businessesRegistery} from "@/api/user";
import {ElMessage} from "element-plus";
import {setToken} from "@/utils/auth";
const ruleFormRef = ref();
const regiseryData = reactive({
    userName: '',
    password: '',
    name: '',
    cover: '',
    phone: '',
    address: ''
})

async function registeryHandler(formEl){
    if (!formEl) return
    await formEl.validate((valid, fields) => {
            if (valid) {
                console.log(2)
                businessesRegistery(regiseryData).then(response => {
                    ElMessage({
                        message: '注册成功,请前往登陆',
                        type: 'success',
                        duration: 1000
                    })
                })
            } else {
                ElMessage({
                    message: '请完成所有必填字段',
                    type: 'warning',
                    duration: 5 * 1000
                })
            }
        }
    )
}
function handleAvatarSuccess(response, uploadFile) {
    regiseryData.cover = response.data;
}
</script>

<style scoped>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

:deep(.el-icon.avatar-uploader-icon) {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
}
:deep(.el-form-item__content){
    justify-content: center;
}
:deep(.avatar){
    width: 100px;
    height: 100px;
    border-radius: 50px;
}
:deep(.el-upload){
    border: 2px solid #d9d9d9;
    border-radius: 50px;
}
</style>